<!DOCTYPE html>
	<head>
		<meta charset="utf-8" />
		<link rel="apple-touch-icon" sizes="76x76" href="../assets/img/apple-icon.png">
		<link rel="icon" type="image/png" href="../assets/img/favicon.png">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
		<title>
			个人主页
		</title>
		<meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0, shrink-to-fit=no' name='viewport' />
		<!--     Fonts and icons     -->
		<link href="../assets/css/font.css" rel="stylesheet" />
		<link rel="stylesheet" href="../assets/css/fontawesome.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
		<!-- CSS Files -->
		<link href="../assets/css/bootstrap.min.css" rel="stylesheet" />
		<link href="../assets/css/now-ui-kit.css?v=1.3.0" rel="stylesheet" />
		<!-- CSS Just for demo purpose, don't include it in your project -->
		<link href="../assets/demo/demo.css" rel="stylesheet" />
		<link href="../assets/css/main.css" rel="stylesheet" />
		<script src="../assets/js/axios-min.js"></script>
	<script src="../assets/js/vue.js"></script>
	<script src="../assets/js/vue-axios.js"></script>
		
	</head>

	<body class="login-page sidebar-collapse">
	
		<!-- Navbar -->
		<nav class="navbar navbar-expand-lg bg-primary fixed-top navbar-transparent " color-on-scroll="400">
			<div class="container">
      <div class="navbar-translate">
      	<span></span>
        <button class="navbar-toggler navbar-toggler" type="button" data-toggle="collapse" data-target="#navigation" aria-controls="navigation-index" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-bar top-bar"></span>
          <span class="navbar-toggler-bar middle-bar"></span>
          <span class="navbar-toggler-bar bottom-bar"></span>
        </button>
      </div>
      <div class="collapse navbar-collapse justify-content-end" id="navigation" data-nav-image="../assets/img/blurred-image-1.jpg">
        <ul class="navbar-nav">
         
		  <li class="nav-item">
		    <a class="nav-link" href="search.html" style="font-size: 18px;">文章搜索</a>
		  </li>
		   <li class="nav-item">
            <a class="nav-link" href="write.html" style="font-size: 18px;">文章编辑</a>
          </li>
		   <li class="nav-item">
            <a class="nav-link" href="login.html" style="font-size: 18px;">退出登录</a>
          </li>
        </ul>
      </div>
			</div>
		</nav>
		<!-- End Navbar -->
		<div class="wrapper">
    <div class="page-header clear-filter page-header-small" filter-color="orange">
      <div class="page-header-image" data-parallax="true" style="background-image:url(../assets/img/bg1.jpg);">
      </div>
      <h1 style="margin-top: 180px; margin-left: 8%; background-color: #ec720e; width: 230px;">个人页面</h1>
    </div>
    <div class="section" style="padding: 0px; background: gainsboro;">
      <div class="container" id="app">      
          <div class="col-md-12 ml-auto mr-auto">
                <div class="row collections">
					<div class="col-md-4">
					 <div id="personal">
					 	<span class="line"></span>
					 	<span class="txt">关于我</span>
					 	<span class="line"></span>
					 	<img src="../assets/img/personal.jpg" />
					 	<span class="info"> 网名：{{user.username}}</span>
					 	<span class="info"> 性别：{{user.sex}}</span>
					 	<span class="info"> 邮箱：{{user.email}}</span>
					 	<span class="info"> 电话：{{user.telephone}}</span>
					 </div>
										<div id="search" >
										<form>
											<div id="box">
												<input type="text" v-model="search" placeholder="请输入关键字" >
												<div id="button" @click="submit()" >搜索</div>
											</div>
										</form>
										</div>						
					 
					  
										<div id="rank" style="width:100%" >
											<span class="line"></span>
											<span style="font-size: 18px; font-weight: 600;">点击排行</span>
											<span class="line"></span>
											<ul>
												<li v-for="(item,i) in artcle" >
													<b @click="read(item)" style="cursor:pointer;">{{item.title}}</b>
													<div style="height: 100px;">
														<span style="display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical; overflow: hidden; ">{{item.body}}</span>
													</div>
												</li>																								
											</ul>
											
										</div>
										</div>
                  <div class="col-md-8">
                    <div id="reading">
                    	<div id="new">最新文章</div>
                    	<ul>
                    		
                    		<li v-for="(item,i) in passage">
                    				<b @click="read(item)" style="cursor:pointer;">{{item.title}}</b>
                    				<div style="height: 135px;">
                    				<img class="photo" src="../assets/img/t03.jpg" />
                    				<span  class="col-md-6" @click="read(item)" style="cursor:pointer;">{{item.body}}</span>
                    				</div>
                    				<div class="inf">
                    				<img src="../assets/img/newsbg01.png" /><a href="/">XX的博客{{item.writeDateString}}</a>浏览 <a href="/">{{item.hitCount}}</a>
                    				<a class="more" @click="read(item)" style="cursor:pointer;">阅读原文>></a>
                    				</div>
                    		</li>
                    		
                    		
                    	</ul>
                    </div>
                  </div>
                 
					
                  </div>
                </div>
              </div>
            </div>
            
           
           
    
  </div>

		<!--   Core JS Files   -->
		<script src="../assets/js/core/jquery.min.js" type="text/javascript"></script>
		<script src="../assets/js/core/popper.min.js" type="text/javascript"></script>
		<script src="../assets/js/core/bootstrap.min.js" type="text/javascript"></script>
		<!--  Plugin for Switches, full documentation here: http://www.jque.re/plugins/version3/bootstrap.switch/ -->
		<script src="../assets/js/plugins/bootstrap-switch.js"></script>
		<!--  Plugin for the Sliders, full documentation here: http://refreshless.com/nouislider/ -->
		<script src="../assets/js/plugins/nouislider.min.js" type="text/javascript"></script>
		<!--  Plugin for the DatePicker, full documentation here: https://github.com/uxsolutions/bootstrap-datepicker -->
		<script src="../assets/js/plugins/bootstrap-datepicker.js" type="text/javascript"></script>
		<!-- Control Center for Now Ui Kit: parallax effects, scripts for the example pages etc -->
		<script src="../assets/js/now-ui-kit.js?v=1.3.0" type="text/javascript"></script>
		
		<script>
		
			new Vue({
				el: '#app',
				data() {
					return {
						
						user:'',
						search:'',
						passage:'',
						artcle:'',
						reading:'',
					}
				},
				mounted() {
					axios.get('/test/MainServlet',{
				        params: {
						  user: this.user,				
						  passage:this.passage,
						  artcle:this.artcle,
				        }
				      })
				      .then((response) => {
				        console.log(response.data);//请求的返回体
				        this.user = response.data.user;				        
				      	this.passage = response.data.passage;	
				      	this.artcle = response.data.artcle;	
				      })
				      .catch((error) => {
				        console.log(error);//异常
				 });
			

				},
				methods: {
					submit() {
						axios.get('/test/MainServlet',{
						        params: {					
								  search:this.search,
						        }
						      })
						      .then((response) => {
						        console.log(response.data);//请求的返回体						        						      			        						        						       
						      })
						      .catch((error) => {
						        console.log(error);//异常
						 });
						 window.location.href='/test/view/search.html'; 
					},
					read(item) {
						axios.get('/test/MainServlet',{
						        params: {					
								  reading:item.id,
						        }
						      })
						      .then((response) => {
						        console.log(response.data);//请求的返回体						        						      			        						        						       
						      })
						      .catch((error) => {
						        console.log(error);//异常
						 });
						 window.location.href='/test/view/read.html'; 
					},
				}

			})
		
		</script>
		
	</body>

</html>